<template>
  <div class="mapMonitoring">
    <Map ref="baseMap" @vper="getveper"></Map>

    <div class="mapMtlist">
      <div class="mapMttab">
        <span @click="openkk"
          :style="status == 1 ? ' color: #ffffff;background: #00CC46;' : 'color: #89898A;background: #F9F9FA;'"
          class="greenf">卡口点</span>
        <span @click="openbj"
          :style="status == 2 ? ' color: #ffffff;background: #00CC46;' : 'color: #89898A;background: #F9F9FA;'"
          class="cancelf">历史报警</span>
      </div>

      <table v-show="status == 1">
        <thead>
          <th>卡口点</th>
          <th>卡口类型</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="item in list">
            <td>{{ item.name }}</td>
            <td>摄像机</td>
            <td>
              <span style="color: rgb(64, 158, 255);margin-right: .1rem;cursor: pointer"
                @click="resvper(item.cameraIndexCode, true, false)">
                预览</span>
              <span @click="setlocal(item)" style="color: rgb(64, 158, 255);margin-right: .1rem;cursor: pointer">
                定位</span>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-show="status == 1" class="mmpage">
        <el-pagination @current-change="handleCurrentChange" :pager-count="5" :page-size="10" layout="prev, pager, next"
          :total="totalElements">
        </el-pagination>
      </div>

      <table v-show="status == 2">
        <thead>
          <th>时间</th>
          <th>卡口点</th>
          <th>车辆/人员</th>
          <th>黑白名单</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="item in lists">
            <td>{{ time(item.insertTime) }}</td>
            <td>{{ kdgl(item.deviceId) }}</td>
            <td>{{ item.modelType == 'car' ? '车辆' : '人员' }}</td>
            <td>{{ hbmd(item.status) }}</td>
            <td>
              <span @click="opendetailsbox(item)" style="color: rgb(64, 158, 255);cursor: pointer">
                详情</span>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-show="status == 2" class="mmpage">
        <el-pagination @current-change="handleCurrentChanges" :pager-count="5" :page-size="10"
          layout="prev, pager, next" :total="totalElementss">
        </el-pagination>
      </div>
    </div>


    <!--详情弹窗-->
    <div class="hdetails" v-if="detailsBox">
      <div>
        <!--标题B-->
        <div style="width: 100%;height: .6rem;position: relative;border: 1px solid #E4E7ED;">
          <div @click="closehd" class="cancelf" style="position: absolute;top: 0.1rem;right: .2rem;">
            <span>关闭</span>
          </div>
        </div>
        <!--标题E-->
        <div style="margin-top: .1rem;width: 100%;height: 5rem;display: flex">
          <div
            style="flex: 6;padding-left: .1rem;display: flex;align-items: center;justify-content: center;border-right: 1px solid #E4E7ED;overflow: hidden">
            <img style="max-width: 100%;max-height:100%" :src="hdobj.mediaList[0].path" alt="">
          </div>
          <div style="flex: 4;padding-left: .2rem;">
            <div class="htxt">
              <span>时间：</span>
              <span>{{ time(hdobj.insertTime) }}</span>
            </div>
            <div class="htxt">
              <span>抓拍点位：</span>
              <span>{{ kdgl(hdobj.deviceId) }}</span>
            </div>
            <div v-if="hdobj.modelType == 'user'" class="htxt">
              <span>人员姓名：</span>
              <span>{{ hdobj.isCheck ? hdobj.checkData.name : hdobj.keywords }}</span>
            </div>
            <div v-if="hdobj.modelType == 'user'" class="htxt">
              <span>人员性别：</span>
              <span>{{ hdobj.isCheck ? hdobj.checkData.sex : hdobj.sex }}</span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车牌号：</span>
              <span>{{ hdobj.isCheck ? hdobj.checkData.plateNo : hdobj.keywords }}</span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车辆类型：{{ hdobj.isCheck ? hdobj.checkData.vehicleType : hdobj.uploadData.vehicleType }}</span>
              <span></span>
            </div>
            <div v-if="hdobj.modelType == 'car'" class="htxt">
              <span>车辆颜色：</span>
              <span>{{ hdobj.isCheck ? hdobj.checkData.vehicleColor : "暂无" }}</span>
            </div>
            <div class="htxt">
              <span>黑白名单：</span>
              <span>{{ hbmd(hdobj.status) }}</span>
            </div>
          </div>
        </div>
        <div style="height: .1rem;">

        </div>
      </div>
    </div>
    <!--详情弹窗-->

    <!--视频预览-->
    <div class="vper" v-show="isvper">
      <div>
        <div>
          <img src="../../static/images/icon/close.png" @click="resvper('', false, true)" alt="">
        </div>
        <div class="playWnd" id="playWnd">

        </div>
      </div>
    </div>
    <!--视频预览-->

  </div>
</template>
<script>
import Map from './Map.vue'
import api from '../utils/api'
import http from '../utils/http'

export default {
  data() {
    return {
      status: 1,
      detailsBox: false,
      areaId: "",
      list: [],
      lists: [],
      totalElements: 10,
      totalElementss: 10,
      oWebControl: null,
      isvper: false,
      timeStr: "",
      pageNum: 0,
      pageNums: 0,
      checkpoint_list: [],
      hdobj: {}
    }
  },
  components: { Map },
  mounted() {
    let vm = this;
    setTimeout(function () {
      vm.gateDevice();
    }, 1500)

  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
    this.gateWarning();
    var time = new Date();
    var years = time.getFullYear();
    var months = time.getMonth() + 1;
    var dates = time.getDate();
    if (months >= 1 && months <= 9) {
      months = "0" + months;
    }
    if (dates >= 0 && dates <= 9) {
      dates = "0" + dates;
    }
    this.timeStr = years + "-" + months + "-" + dates + '~' + years + "-" + months + "-" + dates;
    // this.gethisdata();
  },
  methods: {
    gateWarning() {
      var then = this;
      (async function () {
        let res = await http.post(api.car.gateWarning + '?areaId=' + then.areaId)
        if (res.data.code == '200') {
          then.checkpoint_list = res.data.data
        } else {
          then.warn(res.data.message)
        }
      })()
    },
    hbmd(t) {
      if (t == 'black') {
        return '黑名单'
      }
      if (t == 'white') {
        return '白名单'
      }
      if (t == 'unknown') {
        return '陌生名单'
      }
    },
    kdgl(t) {
      let value = ''
      this.checkpoint_list.forEach(e => {
        if (t == e.value) {
          value = e.name
        }
      })
      return value;
    },
    time(t) {
      let time = new Date(t),
        oHour = time.getHours(),
        oMin = time.getMinutes(),
        oSen = time.getSeconds();
      if (oHour >= 1 && oHour <= 9) {
        oHour = "0" + oHour;
      }
      if (oMin >= 0 && oMin <= 9) {
        oMin = "0" + oMin;
      }
      if (oSen >= 0 && oSen <= 9) {
        oSen = "0" + oSen;
      }
      return oHour + ':' + oMin + ':' + oSen;
    },
    gethisdata() {
      let then = this;
      (async function () {
        let res = await http.post(api.car.gateWarningpage, {
          pageSize: 10,
          pageNum: then.pageNums,
          areaId: then.areaId,
          deviceIdStr: "",
          modelType: "",
          statusStr: "",
          timeStr: then.timeStr
        })
        if (res.data.code == '200') {
          then.lists = res.data.data.content;
          then.totalElementss = res.data.data.totalElements;
        } else {
          alert(res.data.message)
        }
      })()
    },
    setlocal(t) {
      var data = { name: t.name, id: t.cameraIndexCode }, lc = [t.lon, t.lat];
      this.$refs.baseMap.artificialLocation(data, lc);
    },
    getveper(data) {
      this.resvper(data, true, false)
    },
    closevper() {
      this.isvper = false;
    },
    //初始化
    resvper(data, open, colose) {
      //页面加载时创建播放实例初始化
      //声明公用变量
      var initCount = 0;
      var pubKey = '';
      //        var oWebControl;
      var then = this;
      if (open) {
        this.isvper = true;
        setTimeout(function () {
          initPlugin();

          // 创建播放实例
          function initPlugin() {
            then.oWebControl = new WebControl({
              szPluginContainer: "playWnd",                       // 指定容器id
              iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
              iServicePortEnd: 15909,
              szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
              cbConnectSuccess: function () {                     // 创建WebControl实例成功
                then.oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
                  dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死
                }).then(function () {                           // 启动插件服务成功
                  then.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                    cbIntegrationCallBack: cbIntegrationCallBack
                  });

                  then.oWebControl.JS_CreateWnd("playWnd", 1000, 500).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                    init();  // 创建播放实例成功后初始化
                  });
                }, function () { // 启动插件服务失败
                });
              },
              cbConnectError: function () { // 创建WebControl实例失败
                then.oWebControl = null;
                $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                initCount++;
                if (initCount < 3) {
                  setTimeout(function () {
                    initPlugin();
                  }, 3000)
                } else {
                  $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                }
              },
              cbConnectClose: function (bNormalClose) {
                // 异常断开：bNormalClose = false
                // JS_Disconnect正常断开：bNormalClose = true
                then.oWebControl = null;
              }
            });
          }

          // 设置窗口控制回调
          function setCallbacks() {
            then.oWebControl.JS_SetWindowControlCallback({
              cbIntegrationCallBack: cbIntegrationCallBack
            });
          }

          // 推送消息
          function cbIntegrationCallBack(oData) {
            showCBInfo(JSON.stringify(oData.responseMsg));
          }

          //初始化
          function init() {
            getPubKey(function () {
              ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////
              var appkey = "24337406";                           //综合安防管理平台提供的appkey，必填
              var secret = setEncrypt("UobciEMbw0OSJe7v3C2S");   //综合安防管理平台提供的secret，必填
              var ip = "116.113.70.206";                           //综合安防管理平台IP地址，必填
              var playMode = 0;                                  //初始播放模式：0-预览，1-回放
              var port = 34443;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
              var snapDir = "D:\\SnapDir";                       //抓图存储路径
              var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
              var layout = "1x1";                                //playMode指定模式的布局
              var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
              var encryptedFields = 'secret';					   //加密字段，默认加密领域为secret
              var showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
              var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
              var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
              ////////////////////////////////// 请自行修改以上变量值	////////////////////////////////////

              then.oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                  appkey: appkey,                            //API网关提供的appkey
                  secret: secret,                            //API网关提供的secret
                  ip: ip,                                    //API网关IP地址
                  playMode: playMode,                        //播放模式（决定显示预览还是回放界面）
                  port: port,                                //端口
                  snapDir: snapDir,                          //抓图存储路径
                  videoDir: videoDir,                        //紧急录像或录像剪辑存储路径
                  layout: layout,                            //布局
                  enableHTTPS: enableHTTPS,                  //是否启用HTTPS协议
                  encryptedFields: encryptedFields,          //加密字段
                  showToolbar: showToolbar,                  //是否显示工具栏
                  showSmart: showSmart,                      //是否显示智能信息
                  buttonIDs: buttonIDs                       //自定义工具条按钮
                })
              }).then(function (oData) {
                then.oWebControl.JS_Resize(1000, 500);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
              });
            });
          }

          //获取公钥
          function getPubKey(callback) {
            then.oWebControl.JS_RequestInterface({
              funcName: "getRSAPubKey",
              argument: JSON.stringify({
                keyLength: 1024
              })
            }).then(function (oData) {
              if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data;
                callback()
              }
            })
          }

          //RSA加密
          function setEncrypt(value) {
            var encrypt = new JSEncrypt();
            encrypt.setPublicKey(pubKey);
            return encrypt.encrypt(value);
          }

          // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
          $(window).resize(function () {
            if (then.oWebControl != null) {
              then.oWebControl.JS_Resize(1000, 500);
              setWndCover();
            }
          });
          // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
          $(window).scroll(function () {
            if (oWebControl != null) {
              oWebControl.JS_Resize(1000, 500);
              setWndCover();
            }
          });

          // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
          function setWndCover() {
            var iWidth = $(window).width();
            var iHeight = $(window).height();
            var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

            var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
            var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
            var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
            var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

            iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
            iCoverTop = (iCoverTop > 500) ? 500 : iCoverTop;
            iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
            iCoverBottom = (iCoverBottom > 500) ? 500 : iCoverBottom;

            then.oWebControl.JS_RepairPartWindow(0, 0, 1001, 500);    // 多1个像素点防止还原后边界缺失一个像素条
            if (iCoverLeft != 0) {
              then.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 500);
            }
            if (iCoverTop != 0) {
              then.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
            }
            if (iCoverRight != 0) {
              then.oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 500);
            }
            if (iCoverBottom != 0) {
              then.oWebControl.JS_CuttingPartWindow(0, 500 - iCoverBottom, 1000, iCoverBottom);
            }
          }

          setTimeout(function () {
            //          预览
            var cameraIndexCode = data;     //获取输入的监控点编号值，必填
            var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
            var transMode = 1;                                      //传输协议：0-UDP，1-TCP
            var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
            var wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

            then.oWebControl.JS_RequestInterface({
              funcName: "startPreview",
              argument: JSON.stringify({
                cameraIndexCode: cameraIndexCode,                //监控点编号
                streamMode: streamMode,                         //主子码流标识
                transMode: transMode,                           //传输协议
                gpuMode: gpuMode,                               //是否开启GPU硬解
                wndId: wndId                                     //可指定播放窗口
              })
            })
          }, 1000)

        }, 1000)
      }
      if (colose) {
        if (then.oWebControl != null) {
          then.oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
          });
          then.oWebControl.JS_HideWnd();// 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
          // 断开与插件服务连接成功
          then.oWebControl.JS_Disconnect().then(function () {
            then.isvper = false;
          },
            function () {

            });
        }
      }
    },
    //获取数据
    gateDevice() {
      var then = this;
      (async function () {
        let res = await http.post(api.car.gateDevice, {
          pageSize: 10,
          pageNum: then.pageNum,
          areaId: then.areaId,
          keywords: ""
        })
        if (res.data.code = '200') {
          then.list = res.data.data.content;
          then.totalElements = res.data.data.totalElements;

          var arr = [];
          res.data.data.content.forEach(t => {
            var z = {
              id: t.id,
              name: t.name,
              iconSrc: "../../static/images/jk_anchor_bottom_center.png",
              borderColor: "#ffffff",
              fillColor: "#00CC46",
              data: {
                type: '地图监控',
                data: {
                  name: t.name,
                  id: t.cameraIndexCode
                },
                size: 1,
              },
              geojson: { coordinates: [t.lon, t.lat], type: "Point" }
            }
            arr.push(z)
          })
          if (arr.length != 0) {
            then.$refs.baseMap.previewshape(arr, "alread_Point");
          }
        } else {
          alert('网络异常')
        }
      })()
    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.gateDevice();
    },
    handleCurrentChanges(val) {
      this.pageNums = val - 1;
      this.gethisdata();
    },
    closehd() {
      this.detailsBox = false;
    },
    opendetailsbox(data) {
      this.hdobj = data;
      this.detailsBox = true
    },
    closedetailsbox() {
      this.detailsBox = false
    },
    openkk() {
      this.status = 1;
    },
    openbj() {
      this.status = 2
      this.gethisdata();
    }
  }
}
</script>
<style scoped>
@import "../../static/css/mapMonitoring.css";
</style>
